CSS 编码规范

一、CSS 书写规范

缩进

使用 4 个空格做为一个缩进层级。

.selector {
    margin: 0;
    padding: 0;
}

空格

1.选择器与 '{' 之间要包含空格；
2.属性名与之后的 ':' 之间不允许包含空格， ':' 与 属性值之间要包含空格；
3.列表型属性值书写在单行时，',' 后要跟一个空格；
4.注释 '/*' 后和 '*/' 前要有一个空格。

/* good */
.selector {
    margin: 0;
    font-family: Arial, sans-serif;
}

5.">、+、~ "选择器的两边各保留一个空格。

main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

分号

每个属性声明末尾都要加分号。

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

空行

1.'}' 后最好跟一个空行，包括 scss、less等中嵌套的规则；
2.属性之间需要适当的空行。

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

换行

1.'{' 后和 '}' 前；
2.每个属性独占一行；
3.多个规则的分隔符 ',' 后。

.element {
    color: red;
    background-color: black;
}

.element,
.dialog {
    ...
}

引号

1.最外层统一使用双引号；
2.url的内容要用引号；
3.属性选择器中的属性值需要引号。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

选择器

1.避免出现过多的祖先选择器，各浏览器会有性能差异，消耗在选择器的时间也不尽相同。
尽量最多控制在3级以内。

/* bad */
ul.example {}
.example1 .example2 .example3 .example4 {}

/* good */
.example {}

.example1,
.example2 {}

2.非必要的情况下不要使用元素标签名和 id 或 class 进行组合。

/* bad */
ul#example {}
div.error {}

/* good */
#example {}
.error {}

属性书写顺序

1.同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性;
2.Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等；
Box Model 相关属性包括：border / margin / padding / width / height 等；
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等；
3.Visual 相关属性包括：background / color / transition / list-style 等；
4.另外，如果包含 content 属性，应放在最前面。

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

数值

当数值为 0 - 1 之间的小数时，省略整数部分的 0。

panel {
    opacity: .8;
}

长度

长度为 0 时须省略单位。 (也只有长度单位可省)

body {
    padding: 0 5px;
}

颜色

1.rgb 颜色值使用十六进制记号形式 #rrggbb。不要使用 rgb()；
2.带有 alpha 的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

3.颜色值可以缩写时，使用缩写形式。

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

4.颜色值不要使用命名色值。

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

5.颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

/* Prefixed properties */
.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

不要使用 @import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

使用多个 <link> 元素；
通过 Scss 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
    @import url("more.css");
</style>

二、CSS 命名规范

1.类名使用小写字母，以中划线分隔。
2.避免过度任意的简写，要意义明确。.btn 代表 button，但是 .s 不能表达任何意思。
3.id采用驼峰式命名
4.scss、less等中的变量、函数、混合、placeholder采用驼峰式命名。

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 变量 */
$colorBlack: #000;

/* 函数 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

附常用类 / id 命名规范：

页　眉：header
内　容：content
容　器：container
页　脚：footer
版　权：copyright　
导　航：menu
主导航：mainmenu
子导航：submenu
标　志：logo
标　语：banner
标　题：title
侧边栏：sidebar
图　标：icon
注　释：note
搜　索：search
按　钮：btn
登　录：login
链　接：link
信息框：message

三、CSS 注释

1.注释可以统一用'/* */'；
2.缩进与下一行代码保持一致；
3.可位于一个代码行的末尾，与代码间隔一个空格。

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

四、编辑器配置

将你的编辑器进行设置，可以避免常见的代码不一致和差异。
具体配置信息可查看这里